{% extends "login.html" %} 
{% block title %}CourseHub{% endblock %} 
{%block navigation %}{% endblock %} 

{% block content %}

<div class="latest">
	<div class="latest-in">
		
<a id = "latestcomment" href = "/comment/" >Latest Comment </a> &nbsp;|&nbsp;<a id = "popularcomment" href="/course/">Most Popular Course </a>
		
	</div>
</div>

	<!-- Content box with light blue background href="/course/latest/" -->

			{% if CourseList %} {% for Course in CourseList %}
			<div class="course">
	
				<div class="date2">
					<div class="ratevalue">
					{{ Course.course_average }}						
					</div>
				</div>
				<div class="date">
					<div class="day">
					<div class = "ratestar">{{ Course.course_average }}</div>						
					</div>
				</div>
				<h3>
					<a href="/course/{{ Course.id }}/">{{ Course.course_title }}</a>
				</h3>
				<div id="university">
					<p>{{ Course.school.university }}</p>			
				</div>
				<div class="tutor">{{  Course.course_date }}</div>
				<div class="cleaner">&nbsp;</div>

			</div>
			{% endfor %} {% else %}
			<p>No course created</p>
			{% endif %}


	<!-- Content box with light blue background end jQuery("#replace").load('/course/popular/');-->
<script type="text/javascript">	
  jQuery(function() {
	  
		$(function() { 
			$('div.ratestar').ratecourse();
		});
  
       var latest = jQuery("#latestcomment");
      latest.click(function(e) {
           jQuery("#latestcomment").css("background-color", "#214F73")
           jQuery("#latestcomment").css("color", "#ffffff")
           jQuery("#popularcomment").css("background-color", "#EBFFC0")
           jQuery("#popularcomment").css("color", "#214F73")
       });
      
      var latest = jQuery("#popularcomment");
  
           jQuery("#popularcomment").css("background-color", "#214F73")
           jQuery("#popularcomment").css("color", "#ffffff")
           jQuery("#latestcomment").css("background-color", "#EBFFC0")
           jQuery("#latestcomment").css("color", "#214F73")
      
           
  });
  
  $.fn.ratecourse = function (){
		return $(this).each(function() { 
	        // Get the value 
	        var rate = parseFloat($(this).html()); 
	        // Make sure that the value is in 0 - 5 range, multiply to get width 
	        var width = (rate/5) * 55; 
	        $(this).html('<div class="rating_bar"><div style="width:' + width + 'px"></div></div>');
	      
	    }); 		
	}
 </script> 
{% endblock %}
